<template>
	<view class="container">
		<view class="wrap">

			<view class="buttona">
				<view class="cancel" @click="goCancel">取消</view>
				<view class="add" @click="submit">发布</view>
			</view>


			<textarea @input="onInput" :value="bigtext" class="inpp" maxlength="200"
				placeholder="请输入标题,最多只能输入200字"></textarea>

			<view class="MyTitleName">添加商品图片</view>

			<view class="update-file">
				<view v-if="imageList.length !=0" class="updated" v-for="(s,i) in imageList" :key="i">
					<image class="img" :src="s" mode="" @tap="previewImage"></image>
				</view>
				<view class="nochange-image" v-if="imageList.length <6">
					<view class="pushPic" @click="select">
						<uni-icons type="plusempty" color="#c9c9c9" size="21"></uni-icons>添加更多
						<view class="txt">细节图卖更快~</view>
					</view>
				</view>

				<!-- 22222222222222222222 -->
				<view class="MyTitleNames">添加商品详情描述图片</view>
				<view v-if="imageLists.length !=0" class="updated" v-for="(s,i) in imageLists" :key="i">
					<image class="img" :src="s" mode="" @tap="previewImages"></image>
				</view>
				<view class="nochange-image" v-if="imageLists.length==0">
					<view class="pushPic" @click="selects">
						<uni-icons type="plusempty" color="#c9c9c9" size="21"></uni-icons>添加更多
						<view class="txt">商品详情图片~</view>
					</view>
				</view>

				<view class="imag">
					<view class="ll">
						<image class="img" src="../../static/img/brand.png" mode=""></image>
						<view class="tt">品种/送给谁等</view>
					</view>
				</view>

				<view class="kindd">
					<view class="lsft">品种</view>
					<scroll-view class="dataList" :scroll-x="true" style="white-space: nowrap;">
						<view v-for="(item,index) in kind" :key="index" :class="kindClicks==index ? 'dd-active' : 'dd'"
							@click="kindCLick(index,item)">
							{{item.name}}
						</view>

					</scroll-view>
				</view>


				<view class="kindd">
					<view class="lsft">送Ta</view>
					<scroll-view class="dataList" :scroll-x="true" style="white-space: nowrap;">
						<view v-for="(items,indexs) in friends" :key="indexs"
							:class="friendclicks==indexs ? 'dd-active' : 'dd'" @click="friendclicke(indexs,items)">
							{{items.peoplemc}}
						</view>

					</scroll-view>
				</view>

				<view class="imag">
					<view class="ll">
						<image class="img" src="../../static/img/price.png" mode=""></image>
						<view class="tt">价格</view>
					</view>
					<view class="rr">
						<view class="price">￥</view>
						<input class="inp" type="number" placeholder="请输入>" @input="OnpriceV">
					</view>
				</view>
				<view class="imag">
					<view class="ll">
						<image class="img" src="../../static/img/kucun.png" mode=""></image>
						<view class="tt">库存</view>
					</view>
					<view class="rr">
						<view class="price">^</view>
						<input class="inp" type="number" placeholder="请输入>" @input="OnStockV">
					</view>
				</view>


			</view>
		</view>
		
		<view style="height: 80rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				bigtext: '',
				imageList: [],
				imageLists: [],
				kind: [],
				kindClicks: 0,
				friends: [],
				friendclicks: 0,
				addData: {
					xhmc: '', //鲜花名称
					xhms: '', //鲜花描述
					xhyjjg: '', //最初价格
					xhdzjg: '', //折扣价格
					xhxl: 0, //鲜花销量
					xhxq: '', //鲜花详情
					xhkc: '', //鲜花库存
					xhzlbh: 'mM0kY0kG8dI6kJ4hX5uF6cP0bU3bR4kR', //鲜花种类编号
					xhtpList: [], //鲜花图片
					xhzt: 'bF2iN9kG4gD1qT1uC4xC1mL1mE7aZ5zV' //鲜花主题编号--父母
				}
			}
		},
		onShow() {

			this.GetBrand()
			var bs = uni.getStorageSync('UserInformation')
			this.addData.xhms = bs.bh
			this.token = bs.usertoken

		},
		methods: {
			GetBrand() {
				this.requestfs({
					url: '/mall/type/mallList',
					Authorization: this.token,
				}).then(res => {

					if (res.data.msg == "success") {
						var freshFlower = res.data.data

						for (var i = 0; i < freshFlower.length; i++) {
							for (var j = 0; j < freshFlower[i].children.length; j++) {

								this.kind.push(freshFlower[i].children[j])
							}
						}
					}
				})

				this.requestfs({
					url: '/mall/people/peopleList'
				}).then(res => {

					if (res.data.msg == "success") {
						this.friends = res.data.data
					}
				})
			},
			OnpriceV(e) {
				this.addData.xhyjjg = e.target.value
				this.addData.xhdzjg = this.addData.xhyjjg * 0.8
			},
			OnStockV(e) {
				this.addData.xhkc = e.target.value
			},
			onInput(e) {
				this.addData.xhmc = e.target.value
			},
			friendclicke(index, item) {

				if (this.friendclicks != index) {
					this.friendclicks = index
					this.addData.xhzt = item.bh
				}
			},
			kindCLick(index, item) {
				if (this.kindClicks != index) {
					this.kindClicks = index
					this.addData.xhzlbh = item.bh
				}
			},
			submit() { 
				// this.bigtext == '' || 
				if (this.imageList.length == 0 || this.imageLists.length == 0) {

					return
				}
				//显示加载框
				uni.showLoading({
					title: '加载中'
				});
				// /mall/goods/saveOrupdateGoods 添加接口
				
				this.requestfs({
					url: '/mall/goods/saveOrupdateGoods',
					data: this.addData,
					method: 'POST',
					Authorization: this.token,
				}).then(res => {
					if (res.data.msg == "success") {
						uni.hideLoading()
						uni.navigateBack(1)
					}
				})

			},
			//预览图片
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			select() {
				this.chooseImages();
			},
			chooseImages() {
				var th = this
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {

						this.arr = res.tempFilePaths
						for (var i = 0; i < this.arr.length; i++) {

							uni.uploadFile({
								url: 'http://localhost:9999/mall/upload/uploadImage',
								filePath: this.arr[i],
								name: 'file',
								header: {
									"content-type": "multipart/form-data"
								},
								success: function(res) {
									var data = JSON.parse(res.data)
									th.imageList.push(data.data)
									th.addData.xhtpList.push(data.data)
								},

								fail(res) {
									console.log('失败res', res)
								}
							})
						}
					}
				})
			},
			previewImages: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			selects() {
				this.chooseImagess();
			},
			chooseImagess() {
				var th = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {

						this.arr = res.tempFilePaths
						for (var i = 0; i < this.arr.length; i++) {

							uni.uploadFile({
								url: 'http://localhost:9999/mall/upload/uploadImage',
								filePath: this.arr[i],
								name: 'file',
								header: {
									"content-type": "multipart/form-data"
								},
								success: function(res) {
									var data = JSON.parse(res.data)
									th.imageLists.push(data.data)
									th.addData.xhxq = data.data
								},

								fail(res) {
									console.log('失败res', res)
								}
							})
						}
					}
				})
			},
			goCancel() {
				uni.navigateBack(1)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;

		.wrap {
			width: 90%;
			margin: 0 auto;


			.dataInfo {
				width: 100%;
				display: flex;
			}

			.inpp {
				border: 1px solid #dfdfdf;
				// margin-top: 15rpx;
				width: 100%;
				margin-bottom: 35rpx;
			}

			.MyTitleName {
				line-height: 60rpx;
				width: 100%;
			}

			.update-file {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 35rpx;

				.MyTitleNames {
					line-height: 60rpx;
					width: 100%;
				}

				.updated {

					.img {
						width: 200rpx;
						height: 220rpx;
						margin: 10rpx;
					}
				}

				.nochange-image {
					// margin-top: 23rpx;

					.image {
						margin-top: 20rpx;
						width: 200rpx;
					}

					.pushPic {
						color: #c9c9c9;
						background: #f7f7f7;
						width: 220rpx;
						height: 150rpx;
						padding-top: 60rpx;
						text-align: center;
						border-radius: 10rpx;
						margin: 4rpx 1%;
					}
				}

			}

			.imag {
				width: 100%;
				height: 45rpx;
				margin-top: 30rpx;

				.ll {
					float: left;
					display: flex;

					.img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 6rpx;
					}
				}

				.rr {
					float: right;
					display: flex;
					width: 150rpx;

					.price {
						color: #d96263;
					}

					.inp {
						margin-top: -5rpx;
						margin-left: 5rpx;
						color: #d96263;
					}
				}
			}

			.kindd {
				width: 100%;
				font-size: 26rpx;
				margin-top: 15rpx;
				overflow: hidden;
				display: flex;
				font-size: 24rpx;

				.lsft {
					width: 20%;
					text-align: center;
					padding: 10rpx 0;
					font-weight: bold;
					height: 55rpx;
					line-height: 55rpx;
				}

				.dataList {
					margin: 10rpx;
					width: 80%;
					display: inline-block;
					overflow: hidden;
					height: 55rpx;

					.dd-active {
						display: inline-block;
						color: #ef5e25;
						background: rgba(239, 94, 37, 0.2);
						padding: 0 20rpx;
						height: 55rpx;
						line-height: 55rpx;
						margin: 0 10rpx;
						border-radius: 30rpx;
					}

					.dd {
						color: #5b5b5b;
						background: #f7f7f7;
						margin: 0 10rpx;
						border-radius: 30rpx;
						display: inline-block;
						padding: 0 20rpx;
						height: 55rpx;
						line-height: 55rpx;
					}
				}

				.dataList:first-child {
					margin-left: 0;
				}



			}

			.pict {
				display: flex;
				margin-bottom: 35rpx;


				.photo {
					width: 98%;
					height: 210rpx;
					margin: 4rpx 1%;
					border-radius: 10rpx;
				}

				.pushPic {
					color: #c9c9c9;
					background: #f7f7f7;
					width: 98%;
					height: 150rpx;
					padding-top: 60rpx;
					text-align: center;
					border-radius: 10rpx;
					margin: 4rpx 1%;
				}
			}


			.buttona {
				height: 100rpx;
				line-height: 60rpx;

				.cancel {
					float: left;
				}

				.add {
					float: right;
					height: 60rpx;
					line-height: 60rpx;
					background: #ef5e25;
					width: 100rpx;
					text-align: center;
					border-radius: 20rpx;
					color: white;
				}
			}
		}
	}
</style>
